import { A, RouteDefinition, useNavigate } from "@solidjs/router";
import {
  IRegisterRequest,
  RegisterRequest,
  V1Client,
} from "@src/services/v1_client";
import { handleError } from "@src/utils/http-utils";
import { useClient } from "@src/utils/useHelper";
import { Card, FcForm, FcFormItem, FcFormSubmit, TextBox } from "solid-fire-controls";
import { FormControl } from "solid-form-context";
import { Component } from "solid-js";
import Swal from "sweetalert2";
import {
  SolidSweetAlertOptions,
  withSolidContent,
} from "sweetalert2-solid-content";

const client = useClient(V1Client);
const solidSwal = withSolidContent(Swal);

const Register: Component = () => {
  const navigate = useNavigate();

  const handleSubmit = (
    formValue: IRegisterRequest & { repeatPassword: string }
  ) => {
    return client
      .postApiIdentityV1Register(new RegisterRequest(formValue))
      .then(() => {
        let timeInterval: any;
        return solidSwal
          .fire({
            title: "Success",
            html: (
              <>
                注册成功！<b></b>秒后自动跳转！
              </>
            ),
            confirmButtonText: "去登录",
            timer: 5000,
            timerProgressBar: true,
            didOpen(popup) {
              solidSwal.showLoading();
              const text = popup.querySelector("b");
              timeInterval = setInterval(() => {
                if (text) {
                  text!.textContent = parseInt(
                    `${(solidSwal.getTimerLeft() ?? 5000) / 1000}`
                  ).toString();
                }
              }, 100);
            },
            willClose(popup) {
              if (timeInterval) {
                clearInterval(timeInterval);
              }
            },
          })
          .then((result) => {
            if (
              result.isConfirmed ||
              result.dismiss == Swal.DismissReason.timer
            ) {
              navigate("/login");
            }
          });
      })
      .catch(handleError);
  };

  return (
    <div class="row justify-content-center align-items-center w-100 h-100">
      <div class="col-12 col-md-8 col-lg-4">
        <h1>注册</h1>
        <Card>
          <Card.Body>
            <FcForm value={{}} initialValue={{}} onSubmit={handleSubmit}>
              <FcFormItem
                label="Email"
                name="email"
                control={TextBox}
                controlProps={{ classList: { "mb-3": true } }}
              ></FcFormItem>
              <FcFormItem
                label="密码"
                name={"password"}
                control={TextBox}
                controlProps={{
                  type: "password",
                  clearable: false,
                  classList: { "mb-3": true },
                }}
              ></FcFormItem>
              <FcFormItem label="重复密码" name="repeatPassword">
                <FormControl
                  control={TextBox}
                  controlProps={{
                    type: "password",
                    clearable: false,
                    classList: {},
                  }}
                ></FormControl>
              </FcFormItem>
              <div class="w-100 ps-1 pe-1 mb-3">
                已有账号?去<A href="/login">登录</A>
              </div>
              <FcFormSubmit class="btn btn-primary w-100">注册</FcFormSubmit>
            </FcForm>
          </Card.Body>
        </Card>
      </div>
    </div>
  );
};

export const RegisterRoute: RouteDefinition = {
  path: "/register",
  component: Register,
};

export default Register;
